<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 原生API加载4326图层 (自定义CRS)</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
    <script src="https://unpkg.com/proj4leaflet@1.0.2/src/proj4leaflet.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 定义自定义EPSG:4326 CRS，匹配SuperMap GlobalCRS84Scale_China_4326 TileMatrixSet
        var customCRS = new L.Proj.CRS('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs', {
            origin: [-180.0, 90.0], // 根据TileMatrixSet提供的TopLeftCorner设置原点 [longitude, latitude]
            resolutions: [
                 1.25764139776733, // Level 0 resolution
                 0.628820698883665, // Level 1 resolution
                 0.251528279553466, // Level 2 resolution
                 0.125764139776733, // Level 3 resolution
                 0.0628820698883665, // Level 4 resolution
                 0.0251528279553466, // Level 5 resolution
                 0.0125764139776733, // Level 6 resolution
                 0.00628820698883665, // Level 7 resolution
                 0.00251528279553466, // Level 8 resolution
                 0.00125764139776733, // Level 9 resolution
                 6.28820698883665E-4, // Level 10 resolution
                 2.51528279553466E-4, // Level 11 resolution
                 1.25764139776733E-4, // Level 12 resolution
                 6.28820698883665E-5, // Level 13 resolution
                 2.51528279553466E-5, // Level 14 resolution
                 1.25764139776733E-5, // Level 15 resolution
                 6.28820698883665E-6, // Level 16 resolution
                 2.51528279553466E-6, // Level 17 resolution
                 1.25764139776733E-6, // Level 18 resolution
                 6.28820698883665E-7, // Level 19 resolution
                 2.51528279553466E-7  // Level 20 resolution
             ],
            bounds: L.bounds([-180.0, -85.0511287798065], [180.0, 85.05112877980648]) // 使用提供的精确边界
        });

        // 创建地图实例，并指定自定义CRS
        var map = L.map('map', {
            center: [35, 105], // 适当调整中心点为中国区域
            zoom: 4, // 适当调整缩放级别
            crs: customCRS // 使用自定义EPSG:4326 CRS
        });

        // 添加SuperMap China_4326图层，使用WMTS接口和GetTile URL模板
        var supermapLayer = L.tileLayer('https://iserver.supermap.io/iserver/services/map-china400/wmts100?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=China_4326&STYLE=default&TILEMATRIXSET=GlobalCRS84Scale_China_4326&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', { // WMTS 服务地址和GetTile模板
            maxZoom: 20, // 根据TileMatrixSet设置最大缩放级别
            minZoom: 0,
            attribution: '© <a href="http://support.supermap.com.cn/product/iServer.aspx">SuperMap iServer</a>',
            tileSize: 256
            // 移除 getTileUrl 函数，Leaflet将使用URL模板中的占位符
        }).addTo(map);

        // 添加错误处理
        supermapLayer.on('tileerror', function(e) {
            console.error('瓦片加载错误:', e);
            console.log('瓦片URL:', e.tile.src);
        });

    </script>
</body>
</html> 